<template>
  <div class="app-container">
    <div class="filter-container filter-container-left">
      <el-form class="form_search flex_box_between" :inline="true" label-width='90px'>
        <el-form-item label='用户名：'>
          <el-input v-model="queryParam.username" placeholder="请输入用户名" clearable/>
        </el-form-item>
        <el-form-item label='账号：'>
          <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable/>
        </el-form-item>
        <el-form-item label='用户类型：'>
          <el-select v-model="queryParam.type" placeholder="请选择用户类型">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='红包名称：'>
          <el-input v-model="queryParam.name" placeholder="请输入红包名称" clearable/>
        </el-form-item>
        <el-form-item label='用户动作：'>
          <el-select v-model="queryParam.action" placeholder="请选择用户动作" class="filter-item form-search-input-small">
            <el-option
              v-for="item in queryParam.type==1?optionsUser:optionsCompany"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-width='120px'>
        <el-form-item label='任务完成时间：'>
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label='红包领取时间：'>
          <el-date-picker
            v-model="time1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange1'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label=''>
          <el-button class="filter-item search" type='primary' icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='80' align='center'/> -->
      <el-table-column prop="user_info.username" label="用户名" align='center'/>
      <el-table-column prop="user_info.mobile" label="账号" align='center'/>
      <el-table-column label="用户类型" align='center' >
        <template slot-scope="item">
          <p>{{item.row.type==1?'个人':'企业'}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="red_packets.name" label="红包名称" align='center'/>
      <el-table-column label="用户动作" align='center'>
        <template slot-scope="item">
          {{getAction(item.row.red_packets)}}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="红包金额" align='center'/>
      <el-table-column prop="complete_date" label="任务完成时间" align='center'/>
      <el-table-column prop="receive_date" label="红包领取时间" align='center'/>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'

export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/promotion/admin/redPacketsLog',
      queryParam: {
        username: '',
        mobile:'',
        name:'',
        type:'',
        action:'',
        complete_start_time_time:'',
        complete_end_time:'',
        receive_start_time:'',
        receive_end_time:'',
        page:1,
        page_size:10
      },
      defaultQueryParam:['page','page_size'],
      time1:'',
      time:'',
      optionsType:[
        {value:'1',label:'个人'},
        {value:'2',label:'企业'}
      ],
      optionsUser:[
        {value:'1',label:'注册'},
        {value:'2',label:'发布简历'},
        {value:'3',label:'浏览岗位'}
      ],
      optionsCompany:[
        {value:'1',label:'注册'},
        {value:'2',label:'发布职位'},
        {value:'3',label:'浏览简历'},
        {value:'4',label:'注册公司'},
        {value:'5',label:'累计浏览'},
        {value:'6',label:'连续浏览'}
      ],
    }
  },
  mounted() {
  },
  methods: {
    // 监听时间选择
    timeChange(t) {
      this.queryParam.complete_start_time_time = t[0]
      this.queryParam.complete_end_time = t[1]
    },
    // 监听时间选择
    timeChange1(t) {
      this.queryParam.receive_start_time = t[0]
      this.queryParam.receive_end_time = t[1]
    },
    // 获取用户动作
    getAction(item) {
      if (!item || !item.type) return
      if (item.type==1) {
        let idx = this.optionsUser.findIndex(res=>{
          return res.value == item.action
          console.log(res.value,item.action)
        })
        return this.optionsUser[idx].label
      } else {
        let idx = this.optionsCompany.findIndex(res=>{
          return res.value == item.action
        })
        return this.optionsCompany[idx].label
      }
    }
  }
}
</script>